/* 主布局容器 */
.main-layout {
  display: flex; /* 使用flex布局 */
  height: 100vh; /* 高度占满视口 */
}
/* 侧边栏样式 */
.sidebar {
  width: 220px; /* 固定宽度 */
  background: #2c3e50; /* 背景色 */
  color: #fff; /* 字体颜色 */
  padding: 20px; /* 内边距 */
}
.sidebar h2 {
  text-align: center; /* 居中 */
  margin-bottom: 30px; /* 下边距 */
}
.sidebar ul {
  list-style: none; /* 去除列表样式 */
  padding: 0;
}
.sidebar ul li {
  margin-bottom: 18px; /* 下边距 */
}
.sidebar ul li a {
  color: #fff; /* 字体颜色 */
  text-decoration: none; /* 去除下划线 */
  display: block; /* 块级 */
  padding: 10px;
  border-radius: 4px;
  transition: background 0.3s;
}
.sidebar ul li a.active, .sidebar ul li a:hover {
  background: #1abc9c; /* 激活或悬停时背景色 */
}
/* 主内容区样式 */
.content {
  flex: 1; /* 占据剩余空间 */
  padding: 30px; /* 内边距 */
  overflow-y: auto; /* 超出滚动 */
} 